<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css复合选择器</title>
    <style>
        /* <!-- 1.后代选择器（重要） --> */
        ol li {
            color: lightblue;
        }

        ul li a {
            text-decoration: none;
            color: white;
        }

        /* 2.子选择器 */
        ul>li>a {
            background-color: red;
        }

        .hot>a {
            color: red;
        }

        /* 并集选择器 */
        .pink,
        p,
        .pig li {
            color: pink;
        }

        /* 伪类选择器 */
        /*1、 a:link 未访问的链接 */
        .tear a:link {
            color: hotpink;
            text-decoration: none;
        }

        /* 2、a:visited 已访问过得链接 */
        .tear a:visited {
            color: yellow;
        }

        /* 3、a:hover 鼠标指针经过的链接 */
        .tear a:hover {
            color: red;
        }

        /* 4、a:active 选择的是鼠标正在按下还没弹起鼠标的链接 */
        .tear a:active {
            color: green;
        }

        /* 5、focus伪类选择器 */
        input:focus {
            color: green;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ol>
        <li>天气不错</li>
    </ol>
    <ul>
        <li><a href="#">哇！好喜欢</a>天气太好了</li>
        <li>天气太好了</li>
        <li>天气太好了</li>
    </ul>
    <div class="hot">
        <a href="#">猪头</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>

    <div class="pink">熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

    <div class="tear">
        <a href="#">参天大树</a>
    </div>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>